<template>
  <div class="wy-wrapper">
		<div class="content" v-html="content"></div>
		<div class="input">
			<n-input
				v-model:value="message"
				type="textarea"
				@keydown="send"/>
		</div>
  </div>
</template>

<script setup>

import { useSessionStore } from '@/stores'
import { get } from '@/axios'
import { marked } from 'marked'
const message = ref('')
const content = ref('')
const sessionStore = useSessionStore()
function send(event) {
	if(event.keyCode === 13) {
		get('/sse/send', { message: message.value }, content => {
		})
	}
}
if (process.client && window.EventSource) {
	const eventSource = new EventSource(`http://127.0.0.1:8080/sse/connect/${sessionStore.sessionId}`)
	eventSource.addEventListener('open', function(event) {
		console.log('Connection opened')
	})	
	// 收到消息事件
	eventSource.addEventListener('message', function(event) {
		content.value += event.data
		console.log('Received message: ' + event.data);
	})
	// 错误事件
	eventSource.addEventListener('error', function(event) {
		console.log('Error occurred: ' + event.data);
	})
	eventSource.addEventListener('ok', function(event) {
		content.value = marked(content.value)
		console.log('okokokok' + event.data);
	})
}
</script>

<style scoped lang="scss">
.wy-wrapper {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	.content {
		flex: 1;
	}
	.input {
		height: 100px;
	}
}
</style>